<template>
<div>	
	<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
			  	<el-col :span="24">
					<el-form-item lable="特约代码"  style="width: 10%;">
						<el-input v-model="formData.clausecode" size="small" placeholder="特约代码"></el-input>
					</el-form-item>
					<el-form-item lable="特约名称">
						<el-input v-model="formData.clausename" size="small" placeholder="特约名称"></el-input>
					</el-form-item>
					<el-form-item lable="创建日期">
						<el-date-picker type="date" placeholder="创建日期" v-model="formData.createdate" size="small"></el-date-picker>
					</el-form-item>
					<el-form-item lable="是否有效"  style="width: 10%;">
						<el-select v-model="formData.validstatus" placeholder="是否有效" size="small">
							<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click="reset()">
							<i class="fa fa-undo"></i>
							重置
						</el-button>
					</el-form-item>
			  	</el-col>
				
			</el-form>
		</el-col>

		<el-table :data="tableData" v-loading="loading" element-loading-text="处理中......" ref="multipleTable" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @sort-change="orderBy" @selection-change="rowSelected" @row-dblclick="showDetail" @row-click="rowSelete">
		 	<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="clausecode" label="特约代码" sortable="custom" width="130"></el-table-column>
			<el-table-column prop="clausename" label="特约名称" show-overflow-tooltip sortable="custom" width="130"></el-table-column>
			<el-table-column prop="lineno" label="行数" width="120"></el-table-column>
			<el-table-column prop="context" label="内容" show-overflow-tooltip min-width="250"></el-table-column>
			<el-table-column prop="validstatus" label="是否有效" sortable="custom" width="120" :formatter="validFormater"></el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
				<el-col :span="14">
					<el-col :span="24">
						<el-form-item>
							<el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="openEditDialog()" icon="edit">修改</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="default" @click="openLogDialog()"><i class="fa fa-search-plus"></i> 查看日志</el-button>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="10">
					<div class="block" style="float:right">
					    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					      :current-page="formData.currentPage"
					      :page-sizes="[15, 30, 45]"
					      :page-size="formData.pageSize"
					      layout="total, sizes, prev, pager, next, jumper"
					      :total="total">
					    </el-pagination>
					  </div>
				</el-col>
			</el-form>
		</el-col>

		<ClauseAdd v-if="showAddDialog"></ClauseAdd>
		<ClauseEdit v-if="showEditDialog"></ClauseEdit>
		<ClauseDetail v-if="showDetailDialog"></ClauseDetail>
		<Log v-if="showLogDialog"></Log>
</div>
</template>

<script>
import ClauseAPI from "../../../js/production/clause/clauseAPI";
import dateUtil from "../../../common/js/dateUtil";
import Utils from"../../../js/production/utils";
import ClauseAdd from "./dialog/ClauseAdd";
import ClauseEdit from "./dialog/ClauseEdit";
import ClauseDetail from "./dialog/ClauseDetail";
import Log from "../common/Log";
export default {
  components : {
  	ClauseAdd,
  	ClauseEdit,
  	ClauseDetail,
  	Log
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    clausecode: '',
	                    clausename: '',
	                    createdate: undefined,
	                    validstatus: '',
	                    orderBy: '',
	                    order: '',
    		},
    		tableData: [],
    		selectedRows: [],
    		total: 0,
		validOptions: [{
			label : '有效',
			value: '1'
		},{
			label : '无效',
			value: '0'
		}],
		isSortRequest: false,	//是否请求 
		showEditDialog: false,
		showAddDialog: false,
		showDetailDialog: false,
		showLogDialog: false,
		rowDetail: {},
		tableHeight: 0,
		loading : false,
	}
  },
  mounted() {
  	this.tableHeight = Utils.getScreenHeight()*0.72;
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  },
  methods: {
  	validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
	reset() {
		this.formData.clausecode = '';
                    	this.formData.clausename = '';
		this.formData.createdate = undefined;
                    	this.formData.validstatus = '';
                    	this.formData.currentPage = 1;
                    	ClauseAPI.query(this);
	},
	handleSizeChange(val) {
		this.formData.pageSize = val;
		ClauseAPI.query(this);
	},
	handleCurrentChange(val) {
		this.formData.currentPage = val;
		ClauseAPI.query(this);
	},
	orderBy(column, prop, order) {
		if (typeof(column) != 'undefined') {
			this.formData.orderBy = column.prop;
			if (column.order == 'descending') {
				this.formData.order = 'desc';
			} else {
				this.formData.order = 'asc';
			}
		}
		if (this.isSortRequest) {
			this.isSortRequest = false;
			ClauseAPI.query(this);
		}
	},
	rowSelected(rows) {
		this.selectedRows = rows;
	},
	rowSelete(row) {
		this.$refs.multipleTable.toggleRowSelection(row);
	},
  	queryData() {
  		if (this.formData.createdate === '') {
			this.formData.createdate = undefined;
		}
  		ClauseAPI.query(this);
  	},
  	openAddDialog() {
  		ClauseAPI.openAddDialog(this);
  	},
  	openEditDialog() {
  		ClauseAPI.openEditDialog(this);
  	},
  	showDetail(row, event) {
  		this.rowDetail = row;
		this.showDetailDialog = true;
  	},
  	openLogDialog() {
		ClauseAPI.openLogDialog(this);
	},
  }
}
</script>